<template>
  <div class="test">
    <!--ref reactive 实验-->
    <div>msg:{{ msg }}</div>
    <div>msg2:{{ msg2 }}</div>

    <!--方法实验-->
    <button @click=addMsg>+</button>
    <!--teleport 实验-->
    <model-button>teleport</model-button>
    <!--<Message>123</Message>-->
    <div class="el-msg-wrapper">123</div>
    <!--testRef-->
    {{ testRef }}
    <div>computed msg*2:{{ dbMsg }}</div>
    <el-card style="width: 480px">234</el-card>

    <todo></todo>
  </div>
</template>

<script>
import {computed, onMounted, reactive, ref, toRefs, watch, watchEffect} from "vue";
import ModelButton from "src/components/ModelButton.vue";
import Todo from "src/components/Todo.vue"
// import Message from "src/Message/Message.vue";

export default {
  name: "Test.vue",
  components: {
    ModelButton, Todo
  },
  setup() {
    //ref 示例
    const msg = ref(0)
    msg.value = 2

    //state 示例
    const state = reactive({
      msg2: 2,
      msg3: 3,
    })

    const dbMsg = computed(() => msg.value * 2)

    onMounted(()=>console.log('mounted state',state.msg2))

    function addMsg() {
      return msg.value++
    }


    state.msg2++

    // const test_state = reactive({
    //   num:1,
    // })


    const testRef = ref(0)
    testRef.value++


    watchEffect(() => {
      console.log('watchEffect msg.num 改变了',msg.value)
    })

    watch(msg, (nval, oval) => {
      console.log('nval,oval', nval, oval)
    })

    return {
      addMsg,
      testRef,
      msg,
      dbMsg,
      ...toRefs(state),
    }
  }
}
</script>

<style lang="scss" scoped>
.test {
  padding: 5px;

  .gz-msg-wrapper {
    .gz-msg {

      .gz-msg-header {

      }

      .gz-msg-body {

      }
    }


  }

}
</style>
